<template>
  <header>
    <ClearBtn @click="hanleClearSelect">清空选中</ClearBtn>
    <div>
      <el-select
        v-model="reportValue"
        class="reportSelect"
        placeholder="Select"
      >
        <el-option
          v-for="item in options"
          :key="item.label"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        placeholder="搜索图书标题"
        class="iptSearch"
        v-model="articleTitle"
        clearable
      >
      </el-input>
      <el-input
        placeholder="搜索地区"
        class="iptSearch"
        v-model="address"
        clearable
      >
      </el-input>
      <el-input
        placeholder="搜索评论内容"
        class="iptSearch"
        v-model="content"
        clearable
      >
      </el-input>
      <el-button :icon="Search" type="primary" @click="getListData"
        >搜索</el-button
      >
    </div>
  </header>

  <!-- 提示框 -->
  <el-dialog v-model="dialogVisible" title="提示" width="30%">
    <span>确定要删除选中</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="handleDeleteAll"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { ref, defineAsyncComponent } from 'vue'
const ClearBtn = defineAsyncComponent(
  () => import('@/components/button/ClearBtn.vue')
)
// 图书标题
const articleTitle = ref<string>('')
const address = ref<string>('')
const content = ref<string>('')
// 被举报
const reportValue = ref<'1' | '2' | ''>('')
const options = [
  { value: '', label: '全部' },
  { value: '2', label: '被举报' },
  { value: '1', label: '未被举报' },
]
// 提示框
const dialogVisible = ref<boolean>()

const emits = defineEmits(['whereSearch', 'deleteAllId'])

// 删除提示框
const hanleClearSelect = function () {
  dialogVisible.value = true
}
// 删除多个
const handleDeleteAll = function () {
  dialogVisible.value = false
  emits('deleteAllId')
}
type where = {
  articleTitle?: string
  address?: string
  content?: string
  report?: string
}
let where: where = {}
// 获取数据
const getListData = () => {
  where.articleTitle = articleTitle.value
  where.address = address.value
  where.content = content.value
  where.report = reportValue.value
  emits('whereSearch', where)
}
</script>

<style lang="scss" scoped>
header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-width: 700px;
  margin-top: 20px;

  :deep(.iptSearch) {
    width: 130px;
    margin-right: 8px;
  }

  .reportSelect {
    width: 100px;
    margin-right: 8px;
  }
}
</style>
